<template>
  <div
    class="bottom-container"
    :style="{
      background: type == 'home' ? '' : '#fff',
      boxShadow:
        type == 'home' ? 'none' : 'rgb(236, 237, 237) 0px -2px 0px 0px',
    }"
  >
    <div class="bottom">
      <span
        :style="{ color: type == 'home' ? '' : '#9F9F9F' }"
        class="left-title"
        >想动动⼝就能订机票？试试使⽤</span
      >
      <img src="../../assets/img/siri.png" alt="" />
      <span
        :style="{ color: type == 'home' ? '' : '#000000' }"
        class="right-title"
        >Siri 预订机票</span
      >
    </div>
  </div>
</template>
<script setup lang="ts">
let { type } = defineProps(["type"]);
</script>
<style scoped lang="scss">
.bottom-container {
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 40px;
  background: #000000;
  opacity: 0.7;
  display: flex;
  justify-content: center;
  .bottom {
    width: 430px;
    display: flex;
    align-items: center;
    position: absolute;
    top: 30%;
    img {
      margin: 0 10px 0 10px;
      width: 20px;
      height: 20px;
    }
    .left-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: #bdbebe;
      line-height: 18px;
      text-align: center;
      font-style: normal;
    }
    .right-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: #ffff;
      line-height: 18px;
      text-align: center;
      font-style: normal;
    }
  }
}
</style>
